<template>
	<view class="content">
		<view class="message">
			<view class="icon"><image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/img_dacuojiangbei@2x.png"></image></view>
			<view class="list">
        <view class="title">视频播放中题目：</view>
				<view :class="item.status?'item':'item cuowo'" v-for="(item,index) in list.progress">
					<view class="msg">{{index+1}}. {{item.title}}</view>
					<view class="item-icon">
						<uni-icons v-if="item.status" color="#219F64" size="30" type="checkmarkempty"></uni-icons>
						<uni-icons v-if="!item.status" color="#B8353D" size="30" type="closeempty"></uni-icons>
					</view>
				</view>
        <view class="title">视频播放结束后题目：</view>
        <view :class="item.status?'item':'item cuowo'" v-for="(item,index) in list.end">
          <view class="msg">{{index+1}}. {{item.title}}</view>
          <view class="item-icon">
            <uni-icons v-if="item.status" color="#219F64" size="30" type="checkmarkempty"></uni-icons>
            <uni-icons v-if="!item.status" color="#B8353D" size="30" type="closeempty"></uni-icons>
          </view>
        </view>
			</view>
			<view class="button" @click="to(url)">重新观看视频</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "newAnswerMessage",
		props:['list','url','videoId'],
		data() {
			return {

			};
		},
		methods:{
			to(url){
				this.$dadian("errAgain");
        // 清空播放缓存&&答题时常缓存
        uni.removeStorageSync("videoAnswer:videoTime"+this.videoId)
        uni.removeStorageSync("videoAnswer:time"+'-'+this.videoId)
        // 清空选择缓存
        for (let i=0;i<this.list.progress.length;i++){
          uni.removeStorageSync('videoAnswer:'+this.videoId+'-'+i)
        }
				uni.reLaunch({
					url:url
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.message {
		width: 580upx;
		box-sizing: border-box;
		padding: 40upx 44upx;
		background-color: #fff;
		border-radius: 24upx;
		position: relative;
		padding-top: 140upx;
	}

	.icon {
		position: absolute;
		width: 420upx;
		height: 220upx;
		top: -100upx;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	.icon image{
		width: 100%;
		height: 100%;
	}
	.list{
		max-height: 600upx;
		overflow: auto;
	}

	.button {
		width: 100%;
		height: 90upx;
		background-color: #5CAE77;
		color: #fff;
		font-size: 32upx;
		font-weight: 700;
		line-height: 90upx;
		text-align: center;
		border-radius: 45upx;
    margin-top: 20upx;
	}

	.item {
		width: 100%;
		height: 100upx;
		background-color: #ECF6F0;
		color: #219F64;
		font-size: 32upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 50upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		padding: 0upx 30upx;
	}

	.item .msg {
		flex: 1;
		height: 100%;
		line-height: 100upx;
		overflow: hidden;

		white-space: nowrap;

		text-overflow: ellipsis;

		-o-text-overflow: ellipsis;
	}
  .title{
    font-size: 36upx;
    color: #333333;
    font-weight: 500;
    margin-bottom: 12upx;
    margin-top: 7upx;
  }
	.item-icon {
		width: 40upx;
		height: 40upx;
		margin-left: 20upx;
		display: flex;
		align-items: center;
		justify-content:center;
	}
	.cuowo{
		background-color: #FFEBEB;
		color:#B8353D ;
	}
</style>
